<template>
  <view class="container">
    <view class="header">
      <text class="title">确认收货示例</text>
    </view>
    
    <view class="content">
      <button class="open-btn" @click="openModal">
        打开确认收货弹窗
      </button>
      
      <!-- 添加通过ref调用的按钮 -->
      <button class="ref-btn" @click="callChildMethod">
        通过ref调用子组件方法
      </button>
      
      <!-- 添加带数据打开弹窗的按钮 -->
      <button class="data-btn" @click="openModalWithData">
        带数据打开弹窗
      </button>
      
      <view class="result" v-if="result">
        <text class="result-title">提交结果：</text>
        <text class="result-content">{{ result }}</text>
      </view>
    </view>
    
    <!-- 确认收货弹窗组件 -->
    <ConfirmReceiptModal 
      ref="modalRef"
      v-model:visible="modalVisible"
      :order-info="orderInfo"
      :default-card-number="defaultCardNumber"
      :initial-data="initialData"
      @submit="handleSubmit"
      @close="handleClose"
    />
  </view>
</template>

<script setup>
import { ref } from 'vue'
import ConfirmReceiptModal from './ConfirmReceiptModal.vue'

// 响应式数据
const modalVisible = ref(false)
const result = ref('')
const modalRef = ref(null)

// 传递给子组件的数据
const orderInfo = ref({})
const defaultCardNumber = ref('')
const initialData = ref({})

// 打开弹窗
const openModal = () => {
  modalVisible.value = true
}

// 带数据打开弹窗
const openModalWithData = () => {
  // 模拟订单数据
  orderInfo.value = {
    orderNo: 'ORD' + Date.now(),
    orderDate: new Date().toLocaleDateString(),
    totalAmount: '299.00'
  }
  
  // 设置默认卡号
  defaultCardNumber.value = '1234567890'
  
  // 设置初始数据
  initialData.value = {
    userId: 'user123',
    userName: '张三',
    timestamp: Date.now()
  }
  
  modalVisible.value = true
}

// 通过ref调用子组件方法
const callChildMethod = () => {
  if (modalRef.value) {
    // 可以直接调用子组件的方法
    modalRef.value.submit()
  }
}

// 处理提交
const handleSubmit = (data) => {
  console.log('提交数据:', data)
  result.value = `卡号: ${data.cardNumber}, 订单号: ${data.orderInfo.orderNo}`
  
  uni.showToast({
    title: '确认收货成功',
    icon: 'success'
  })
}

// 处理关闭
const handleClose = () => {
  console.log('弹窗已关闭')
  // 清空数据
  orderInfo.value = {}
  defaultCardNumber.value = ''
  initialData.value = {}
}
</script>

<style scoped>
.container {
  padding: 40rpx;
  min-height: 100vh;
  background-color: #f5f5f5;
}

.header {
  text-align: center;
  margin-bottom: 60rpx;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.content {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 40rpx;
}

.open-btn {
  width: 100%;
  height: 80rpx;
  background-color: #007aff;
  color: #fff;
  border: none;
  border-radius: 8rpx;
  font-size: 28rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
}

.ref-btn {
  width: 100%;
  height: 80rpx;
  background-color: #28a745;
  color: #fff;
  border: none;
  border-radius: 8rpx;
  font-size: 28rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
}

.data-btn {
  width: 100%;
  height: 80rpx;
  background-color: #ff6b35;
  color: #fff;
  border: none;
  border-radius: 8rpx;
  font-size: 28rpx;
  font-weight: bold;
  margin-bottom: 40rpx;
}

.open-btn:active,
.ref-btn:active,
.data-btn:active {
  opacity: 0.8;
}

.result {
  margin-top: 40rpx;
  padding: 20rpx;
  background-color: #f8f8f8;
  border-radius: 8rpx;
}

.result-title {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 10rpx;
  display: block;
}

.result-content {
  font-size: 28rpx;
  color: #333;
  font-weight: bold;
}
</style> 